<h1>Add Category</h1>

<link href="{{$core_js}}/Dynatree/css/ui.dynatree.css" rel="stylesheet" type="text/css">

<script src="{{$core_js}}/Dynatree/ui.core.js" type="text/javascript"></script>
<script src="{{$core_js}}/Dynatree/jquery.dynatree.js" type="text/javascript"></script>


<script type='text/javascript'>
     var ajax_load = "<img src='{{$core_images}}/load.gif' alt='loading...' />";
     var objSelectedCat; // Hold Category Object from Category Tree
     var subCatId = null; // Holds Selected Sub Category ID from Table
     $(function() {
      $("#tabs").tabs();
     });
    $(document).ready(function() {
                                var oTable;
				oTable = $('#tbSubCatList').dataTable( {
                                            "sPaginationType": "full_numbers"
                                         } );

                                $('#divCatInfo').hide();
                                //document.getElementById('divCatInfo').style.visibility = 'hidden';
                                $('#divSubCatList').hide();
                                $('#selectedCatOperations').hide();
                                $("#btnCollapseAll").click(function(){
                                $("#tree").dynatree("getRoot").visit(function(dtnode){
                                    dtnode.expand(false);
                                });
                                return false;
                                });
                                $("#btnExpandAll").click(function(){
                                    $("#tree").dynatree("getRoot").visit(function(dtnode){
                                        dtnode.expand(true);
                                    });
                                    return false;
                                });

                                $("#tree").dynatree({
                                    onActivate: function(dtnode) {
				// A DynaTreeNode object is passed to the activation handler
				// Note: we also get this event, if persistence is on, and the page is reloaded.
                                                                    $('#divSubCatList').hide();
                                                                    objSelectedCat = dtnode;
                                                                    //alert("Category ID :" + dtnode.data.key +", Category Name :"+dtnode.data.title);
                                                                    
                                                                    //$('#tabs').hide("slow");
                                                                     var loadUrl = "{{$base_index_url}}/category/admin/add_edit_category/get_catInfo_subCats";
                                                                     
                                                                     $.ajax({
                                                                                url: loadUrl,
                                                                                type: 'POST',
                                                                                async: false,
                                                                                cache: false,
                                                                                dataType: 'json',
                                                                                data:"is_ajax=true"+"&cat_id="+objSelectedCat.data.key,
                                                                                timeout: 1000,
                                                                                error: function(){
                                                                                    alert('Error loading XML document');
                                                                                },
                                                                                success: function(data){
                                                                                    show_divs();
                                                                                    oTable.fnClearTable();
                                                                                    document.getElementById('divCatDepth').innerHTML = "<h3>You current Category Path :  <font color='#66CC00'>"+data[0].Cat_path+"</font></h3>";
                                                                                    document.getElementById('txtCode').value = data[1].Code;
                                                                                    document.getElementById('txtTitle').value = data[1].Title;
                                                                                    document.getElementById('txtShortDesc').value = data[1].Short_desc;
                                                                                    document.getElementById('txtLongDesc').value = data[1].Long_desc;
                                                                                    set_disabled('divCatInfo', true);
                                                                                    for(var i=2;i<data.length;i++)
                                                                                        oTable.fnAddData([ data[i].ID,data[i].Title, data[i].Code, data[i].Action ]);
                                                                                },
                                                                                 complete :  function(data){
                                                                                    //redraw();
                                                                                 }
                                                                            });

                                                                   
                                                                }
                                                   });
			        });
   

      
</script>
<script>
    function btnEditSelectedCat_click()
    {
        set_disabled('divCatInfo', false);
        document.getElementById('btnSaveCat').style.visibility = 'hidden';
        subCatId = objSelectedCat.data.key;
    }
    function btnDeleteSelectedCat_click()
    {
        delete_subCat(objSelectedCat.data.key);
    }
    function btnAddSubCat_click()
    {
        delete_text();
        set_disabled('divCatInfo', false);
        document.getElementById('btnEditCat').style.visibility = 'hidden';
    }
    function btnAddRootCat_click()
    {
         hide_divs();
         delete_text();
         objSelectedCat = null;
         $('#divCatInfo').show();
         set_disabled('divCatInfo', false);
         document.getElementById('btnEditCat').style.visibility = 'hidden';
    }

    function set_disabled(id, disabled)
    {
        if ( !document.getElementById || !document.getElementsByTagName)
            return;

        var nodesToDisable = {button :'', input :'', optgroup :'', option :'', select :'', textarea :''};

        var node, nodes;
        var div = document.getElementById(id);
        if (!div)
            return;

        nodes = div.getElementsByTagName('*');
        if (!nodes)
            return;

        var i = nodes.length;
        while (i--)
        {
            node = nodes[i];
            if ( node.nodeName && node.nodeName.toLowerCase() in nodesToDisable )
            {
                node.disabled = disabled;
                node.style.visibility = 'visible';
                if(node.nodeName.toLowerCase() == "button" && disabled)
                    node.style.visibility = 'hidden';
            }
        }
    }


    function delete_text()
    {
        document.getElementById('txtCode').value = "";
        document.getElementById('txtTitle').value = "";
        document.getElementById('txtShortDesc').value = "";
        document.getElementById('txtLongDesc').value = "";
    }

    
    function hide_divs()
    {
        $('#divCatInfo').hide();
        $('#divSubCatList').hide();
        $('#selectedCatOperations').hide();
    }

    function show_divs()
    {
        $('#divCatInfo').show();
        $('#divSubCatList').show();
        $('#selectedCatOperations').show();
    }
    function open_tabs()
    {
        $('#tabs').show("slow");
        document.getElementById('btnEditCat').style.visibility = 'hidden';
    }

    function view_subCat(catId)
    {
        var loadUrl = "{{$base_index_url}}/category/admin/add_edit_category/get_category";
         subCatId = catId;
            $.ajax({
                    url: loadUrl,
                    type: 'POST',
                    async: false,
                    cache: false,
                    dataType: 'json',
                    data:"is_ajax=true"+"&cat_id="+catId,
                    timeout: 1000,
                    error: function(){
                        alert('Error loading XML document');
                    },
                    success: function(data){
                        set_disabled('divCatInfo', true);
                        //$('#tabs').show("slow");
                        document.getElementById('txtCode').value = data[0].Code;
                        document.getElementById('txtTitle').value = data[0].Title;
                        document.getElementById('txtShortDesc').value = data[0].Short_desc;
                        document.getElementById('txtLongDesc').value = data[0].Long_desc;
                        document.getElementById('btnSaveCat').style.visibility = 'hidden';
                     },
                     complete :  function(data){
                        //redraw();
                     }
                });
    }
    function edit_subCat(catId)
    {   
         var loadUrl = "{{$base_index_url}}/category/admin/add_edit_category/get_category";
         subCatId = catId;
            $.ajax({
                    url: loadUrl,
                    type: 'POST',
                    async: false,
                    cache: false,
                    dataType: 'json',
                    data:"is_ajax=true"+"&cat_id="+subCatId,
                    timeout: 1000,
                    error: function(){
                        alert('Error loading XML document');
                    },
                    success: function(data){
                        //$('#tabs').show("slow");
                        set_disabled('divCatInfo', false);
                        document.getElementById('btnSaveCat').style.visibility = 'hidden';
                        document.getElementById('txtCode').value = data[0].Code;
                        document.getElementById('txtTitle').value = data[0].Title;
                        document.getElementById('txtShortDesc').value = data[0].Short_desc;
                        document.getElementById('txtLongDesc').value = data[0].Long_desc;
                        document.getElementById('btnSaveCat').style.visibility = 'hidden';
                     },
                     complete :  function(data){
                        //redraw();
                     }
                });
    }

    function delete_subCat(catId)
    {
      subCatId = catId;
      var confirmation = confirm("Are you sure you want to delete the Category ?");
      if (confirmation == true)
      {
           var loadUrl = "{{$base_index_url}}/category/admin/add_edit_category/delete_category";
          
            $.ajax({
                    url: loadUrl,
                    type: 'POST',
                    async: false,
                    cache: false,
                    dataType: 'json',
                    data:"is_ajax=true"+"&cat_id="+subCatId,
                    timeout: 1000,
                    error: function(){
                        alert('Error loading XML document');
                    },
                    success: function(data){
                       alert(""+data[0].result);
                       //document.location = "{{$base_index_url}}/category/admin/add_edit_category";
                       var objTree = $("#tree").dynatree("getTree");
                       var objDeletedCat = objTree.getNodeByKey(subCatId);
                       objDeletedCat.remove();
                       hide_divs();
                    },
                     complete :  function(data){
                        //redraw();
                     }
                });
      }
    }
    //oSelectedCat.remove();
    //oSelectedCat.addChild({title: "Razib", key: "3333"});
    //var node = tree.getNodeByKey("key7654");
    //node.toggleExpand();
    function save_cat()
    { 
      var loadUrl = "{{$base_index_url}}/category/admin/add_edit_category/save_category";
      var code = document.getElementById('txtCode').value;
      var title = document.getElementById('txtTitle').value;
      var short_desc = document.getElementById('txtShortDesc').value;
      var long_desc = document.getElementById('txtLongDesc').value;
      var parent_cat_id = null;
      if(objSelectedCat!=null)
          parent_cat_id = objSelectedCat.data.key;
        $.ajax({
                    url: loadUrl,
                    type: 'POST',
                    async: false,
                    cache: false,
                    dataType: 'json',
                    data:"is_ajax=true&parent_cat_id="+parent_cat_id+"&cat_id="+subCatId+"&code="+code+"&title="+title+"&short_desc="+short_desc+"&long_desc="+long_desc,
                    timeout: 1000,
                    error: function(){
                        alert('Error loading XML document');
                    },
                    success: function(data){
                       //alert("Successful!!");
                       if(objSelectedCat!=null)   //  Not Root Category
                       {
                            if(subCatId == null)
                                objSelectedCat.addChild({title: data[0].Title, key: data[0].Key});
                            else
                                alert(data[0].result);
                            //if(subCatId != null && subCatId != objSelectedCat.data.key)
                            
                            objSelectedCat.expand(true);
                       }
                       else
                       {
                            var rootNode = $("#tree").dynatree("getRoot");
                            rootNode.addChild({title: data[0].Title, key: data[0].Key});
                       }
                       set_disabled('divCatInfo', true);
                       //delete_text();
                       //document.location = "{{$base_index_url}}/category/admin/add_edit_category";
                    },
                     complete :  function(data){
                        //redraw();
                     }
                });

    }
</script>



<table width = "100%">
    <tr>
        <td width = "20%" valign="top" align="left">
            <table width = "95%">
                <tr>
                    <td> <button id="btnAddRootCat" name="btnAddRootCat" onclick = "btnAddRootCat_click();">Add Root Category</button> </td>
                </tr>
                <tr>
                    <td>
                        <p>
                            <b>
                            <a href="#" id="btnExpandAll">Expand Tree</a> |
                            <a href="#" id="btnCollapseAll">Collapse Tree</a>
                            </b>
                        </p>
                    </td>
                </tr>
                <tr><td><div id="tree">{{$tree}}</div></td></tr>
            </table>
        </td>
        <td style="border-left: 1px solid cyan; padding: 5px;">
        <td width = "80%">
            <table width = "100%">
                <tr>
                    <td>
                        <div id="selectedCatOperations">
                            <table width = "100%">
                                 <tr>
                                     <td colspan=3 align="center"><div id = "divCatDepth"></div></td>
                                 </tr>
                                 <tr>
                                     <td align="right" width = "20%"><button id="btnEditSelectedCat" name="btnEditSelectedCat" onclick = "btnEditSelectedCat_click();">Edit Selected Category</button></td>
                                     <td align="left" width = "20%"><button id="btnDeleteSelectedCat" name="btnDeleteSelectedCat" onclick = "btnDeleteSelectedCat_click();">Delete Selected Category</button></td>
                                     <td align="right" width = "60%"><button id="btnAddSubCat" name="addrow" onclick = "btnAddSubCat_click();">Add SubCategory</button></td>
                                 </tr>
                                 <tr>
                                     <td colspan=3 width="100%"><HR></td>
                                 </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="divCatInfo">
                           <table width = "100%">
                              <tr>
                                <td colspan=3>
                                     <div id="tabs">
                                         <ul>
                                          <li><a href="#tabs-1">General Information</a></li>
                                          <li><a href="#tabs-2">Display Setting</a></li>
                                         </ul>
                                         <br>
                                         <div id="tabs-1">
                                                <fieldset align="left" width="100%" class="fieldset">
                                                <legend><b>General Information</b></legend>
                                                    <table width="100%" >
                                                        <tr>
                                                            <td align="right" width="20%">Code:</td>
                                                            <td><input type="text" name="txtCode" id = "txtCode" size="50"/></td>
                                                        </tr>
                                                        <tr>
                                                            <td align="right" width="20%">Title:</td>
                                                            <td><input type="text" name="txtTitle"  id="txtTitle" size="50"/></td>
                                                        </tr>
                                                        <tr>
                                                            <td align="right" width="20%">Short Description:</td>
                                                            <td><input type="text" name="txtShortDesc" id = "txtShortDesc" size="50"/></td>
                                                        </tr>
                                                        <tr>
                                                            <td align="right" width="20%">Long Description:</td>
                                                            <td><textarea rows="2" cols="50" name="txtLongDesc" id = "txtLongDesc"></textarea> </td>
                                                        </tr>
                                                    </table>

                                                </fieldset>
                                         </div>
                                         <div id="tabs-2">
                                                <fieldset align="left" width="100%" class="fieldset">
                                                <legend><b>Display Setting</b></legend>
                                                </fieldset>
                                         </div>
                                         <center>
                                             <button id="btnEditCat" name="btnEditCat" onclick = "save_cat();">Edit</button>
                                             <button id="btnSaveCat" name="btnSaveCat" onclick = "save_cat();">Save</button>
                                         </center>
                                     </div>
                                </td>
                            </tr>
                           </table>
                        </div>
                    </td>
                </tr>
                <tr><td>&nbsp;</td></tr>
                <tr><td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <div id="divSubCatList">
                            <fieldset align="left" width="100%" class="fieldset">
                            <legend><b>SubCategory List</b></legend>
                            <table cellpadding="0" cellspacing="0" border="0" class="display" id="tbSubCatList" width = "100%">
                                <thead>
                                    <tr>
                                        <th>Category ID</th>
                                        <th>Category Title</th>
                                        <th>Category Code</th>
                                        <th>Action</th>
                                   </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            </fieldset>
                        </div>
                    </td>
                </tr>
          </table>
       </td>
    </tr>
</table>




